<template>
	<custom-page-select-layout>
		<template #header>
			<view class="search-wrapper" slot="header">
				<fui-search-bar paddingTb="0" searchText="" paddingLr="0" radius="16" height="80"
					inputBackground="#F3F3F3" isLeft :cancel="false" @clear="onClear"
					@input="onChangeKeywords"></fui-search-bar>

			</view>

		</template>
		<template #body>

			<fui-radio-group>
				<fui-collapse accordion>
					<fui-collapse-item v-for="(item,index) in teamUserViewListData">
						<view class="fui-item__box">
							<fui-radio @change="changeData" :value="item.value"
								:checked="checkedValue.includes(item.value)"></fui-radio>
							<text class="fui-text">{{item.label}}</text>
						</view>
						<template v-slot:content>
							<view class="fui-subItem__box" v-for="(sub,subIndex) in  item.children" :key="index">
								<fui-radio @change="changeData" :value="sub.value"
									:checked="checkedValue.includes(item.value)">
								</fui-radio>
								<text class="fui-text">{{sub.label}}</text>
							</view>
						</template>
					</fui-collapse-item>
				</fui-collapse>

			</fui-radio-group>

		</template>
		<template #footer>
			<view class="footer">

				<fui-row class="button-wrapper" :gutter="16">
					<fui-col :span="6">
						<fui-button background="#F2F3FF" color="#0052D9" @click="onCancel">
							取消
						</fui-button>
					</fui-col>
					<fui-col :span="18">
						<fui-button @click="onConfirm">
							确认
						</fui-button>
					</fui-col>
				</fui-row>
			</view>
		</template>
	</custom-page-select-layout>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'pinia'
	import {
		defineComponent
	} from 'vue'
	import _ from 'lodash'

	import {
		useSyStemStore
	} from '../../store/modules/system.js'

	import {
		useTeamStore
	} from '../../store/modules/team.js'
	import {
		useTeamUserStore
	} from '../../store/modules/teamUser.js'

	export default defineComponent({
		name: 'SelectPageTeam',
		computed: {
			...mapState(useSyStemStore, ['teamList']),
			...mapState(useTeamUserStore, ['checkedValue']),
			...mapGetters(useTeamUserStore, ['teamUserViewListData']),

		},
		data() {
			return {

				multiple: false,
				storeKey: '',
				backToPath: null
			}
		},

		onLoad(options) {

			const is = {
				'false': false,
				'true': true
			}
			const {
				multiple,
				backToPath,
				storeKey
			} = options
			console.log(options, 'options');
			this.backToPath = backToPath
			this.multiple = is[options.multiple]
			this.setStoreKey(storeKey)

		},
		methods: {
			...mapActions(useTeamUserStore, ['setStoreKey', 'onChangeKeywords', 'onClear',
				'changeData'
			]),


			onCancel() {
				uni.redirectTo({
					url: this.backToPath
				})
			},

			onConfirm() {
				uni.redirectTo({
					url: this.backToPath
				})
			},




		}
	})
</script>

<style lang="scss" scoped>
	.fui-item__box {
		width: 100%;
		padding: 26rpx 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.fui-subItem__box {
		padding: 26rpx 48rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		background: #f4f4f4;

		.item {
			margin-right: 16rpx;
		}
	}

	.fui-text {
		padding-left: 16rpx;
	}
</style>